<!--
    Copyright (c) 2022-2024 Julian Knight (Totally Information)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<script src="./resources/node-red-contrib-uibuilder/uib-cache.js"></script>

<script type="text/html" data-template-name="uib-cache">

    <div id="ti-edit-panel">
        <div aria-label="Choose what msg property to group cache by" id="cacheKey-row" class="form-row">
            <label for="node-input-cacheKey"><i class="fa fa-tag"></i> Cache by</label>
            msg.<input type="text" id="node-input-cacheKey" placeholder="Enter a msg property. " style="width:64%">
        </div>
        <div aria-label="Cache all or group by" title="Turn off cache by and record all msgs up to #" class="form-row">
            <input type="checkbox" id="node-input-cacheall" style="display: inline-block; width: auto; vertical-align: top;">
            <label for="node-input-cacheall" style="width: 90%;">Cache all messages individually?<span id="caspan"> (Up to # given below)</span></label>
        </div>
        <div aria-label="Only replay cache if client as actually new" title="A new client comes from a page-load, not a reconnection" class="form-row">
            <input type="checkbox" id="node-input-newcache" style="display: inline-block; width: auto; vertical-align: top;" checked>
            <label for="node-input-newcache" style="width: 90%;">Only replay cache when client is really new</label>
        </div>
        <div aria-label="How many msgs to cache" title="Use 0 for unlimited (up to memory availability)" class="form-row">
            <label for="node-input-num"><i class="fa fa-tag"></i> # msgs</label>
            <input type="number" id="node-input-num">
        </div>
        <div aria-label="Info for cache settings" class="form-row form-tips node-help" style="width:89%">
            Number of msgs to cache<span id="help-per"> per topic</span>.<br>
            Messages are dropped off front of queue once limit is reached.<br>
            Use 0 for unlimited but take care not to run out of memory.
        </div>
    
        <div aria-label="Select which context store and variable to use" class="form-row uib-context-select">
            <label for="node-input-storeName"><i class="fa fa-database"></i> Store</label>
            <label for="node-input-storeContext"><i class="fa fa-database"></i> Type</label>
            <label for="node-input-varName"><i class="fa fa-tag"></i> Variable Name</label>
            <input type="text" id="node-input-storeName">
            <input type="text" id="node-input-storeContext">
            <input type="text" id="node-input-varName" value="uib_cache" title="Can only change if Type is not 'Node'" placeholder="REQD: Context variable name">
        </div>
    
        <div aria-label="Info for context store" class="form-row form-tips node-help" style="width:89%">
            Select a context <b>store</b> to use if you have more than one set up.<br>
            Use persistent store if you want cache to survive a system reset.<br>
            If store changed, old one must be manually deleted.
        </div>
    
        <div aria-label="Info for store type" class="form-row form-tips node-help" style="width:89%">
            Select which <b>type</b> of store to use. The default is "Node".<br>
            Node = This node's store, only accessible to this node.<br>
            Flow/Global = Accessible to other nodes. Use with caution.
        </div>
    
        <hr>
        <div aria-label="Name label" title="Only used for labelling in the flow" class="form-row">
            <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
            <input type="text" id="node-input-name">
        </div>
    </div>
    
</script>
